<template>
	<view class="goodsItem">
		<view class="groupInfo">
			<slot name="headImg"></slot>
			<view class="groupName">
				<slot name="groupName"></slot>
			</view>
		</view>
		<view class="goodsInfo">
				<slot name="coverImg"></slot>
				<view class="goodsName">
					<slot name="goodsName"></slot>
				</view>
				<view class="tags">
					<view class="tag-list">
						<slot name="tag"></slot>
					</view>
				</view>
				<view class="price">
					<text style="font-size: 24rpx;">均价 </text>
					<slot name="price"></slot>
					<text style="font-size: 24rpx;"> rmb</text>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"goodsCard",
		data() {
			return {
				
			};
		}
	}
</script>

<style>
.goodsItem{
	box-sizing: border-box;
	border-radius: 15rpx;
	overflow: hidden;
	background-color: #fff;
	break-inside: avoid;
	/*避免在元素内部插入分页符*/
	box-sizing: border-box;
	margin-bottom: 20rpx;
	box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
	padding: 16rpx;
}
.groupInfo{
	display: flex;
	width: 100%;
	height: 50rpx;
	line-height: 50rpx;
	font-size: 22rpx;
	margin-bottom: 20rpx;
}
.groupInfo .headImg{
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}
.goodsInfo{
	width: 100%;
}
.goodsInfo .coverImg {
	width: 100%;
}
.goodsInfo .goodsName{
	margin-top: 15rpx;
	font-size: 30rpx;
}
.tags .tag {
    display: inline-block;
    height: 40rpx;
    padding: 0 14rpx;
    margin: 10rpx 10rpx 10rpx 0;
    line-height: 40rpx;
	color: #347CD4;
    font-size: 20rpx;
    border-radius: 20rpx;
	background-color: #E3F1F7;
}
.price{
	text-align: right;
	margin-right: 20rpx;
}
</style>